<template>
	<view class="container">
		<view class="user-center">
			<view class="user-center-info">
				<uv-avatar class="avatar" :src="userInfo.avatar" :size="50"
					:random-bg-color="true" @click="handleToAvatar()"></uv-avatar>
				<view class="user-info" @click="handleToLogin()">
					<view class="user-info__name">{{userInfo.nickName}}</view>
					<view class="user-info__info">{{userInfo.roleName}}</view>
				</view>
			</view>
		</view>
		<!-- 常用功能 -->
		<view class="card-item">
			<uv-grid :col="4" :border="false"  @click="handleGrid">
				<uv-grid-item v-for="(item,index) in gridList" :key="index">
					<uv-icon :customStyle="{paddingTop:50+'rpx'}" :name="item.name" :size="28"></uv-icon>
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { reactive } from 'vue';
	import { useUserStore } from '@/store';
	import { pages } from '@/utils/page-url';
	import { isLogin } from '@/utils/auth';

	// 用户store
	const userStore = useUserStore();

	const gridList = [{
		name: 'account',
		title: '我的信息',
		url: pages.mineInfo
	}, {
		name: 'edit-pen',
		title: '修改密码',
		url: pages.mineEditPwd
	}, {
		name: 'setting',
		title: '应用设置',
		url: pages.mineSetting
	}]

	const userInfo = reactive({
		nickName: '登录',
		roleName: '游客',
		avatar: '',
	});

	// 跳转修改头像
	const handleToAvatar = () => {
		// @ts-ignore
		uni.$uv.route({
			url: pages.mineEditAvatar
		})
	};

	// 跳转登陆
	const handleToLogin = () => {
		if (!isLogin()) {
			// @ts-ignore
			uni.$uv.route({
				url: pages.login
			})
		}
	}

	// 跳转我的信息
	const handleGrid = (index: number) => {
		if (gridList[index].url) {
			// @ts-ignore
			uni.$uv.route({
				url: gridList[index].url
			})
		} else {
			uni.showToast({
			  title: '暂未开放',
			  icon: 'none'
			})
		}
	}

	const init = () => {
		if (userStore.nickName) {
			userInfo.nickName = userStore.nickName;
			userInfo.avatar = userStore.avatar;
			if (userStore.roleName.length > 0) {
				userInfo.roleName = userStore.roleName;
			}
		} else {
			userInfo.nickName = '登录';
			userInfo.roleName = '游客';
			userInfo.avatar = '';
		}
	}

	onShow(() => {
		init();
	});

	onLoad(() => {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: `#f6fafd`
		})
	});
</script>

<style lang="scss">
	.container {

	}

	.user-center {
		display: flex;
		align-items: center;
		height: 300rpx;
		background-color: $bgc-mine;
		padding-left: 40rpx;

		.user-center-info {
			width: 100%;
			display: flex;
		}
	}

	.user-info {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&__name {
			font-size: 18px;
			font-weight: bold;
		}

		&__info {
			font-size: 12px;
			color: $uv-info;
		}
	}

	.grid-text {
		margin-top: 20rpx;
		font-size: 14px;
	}

	.card-item {
		background-color: #ffffff;
		margin: 5px 5px 0 5px;
		border-radius: 5px;
		padding-bottom: 20px;
	}
</style>

<style lang="scss" scoped>
</style>
